<template>
    <div class="paymentData">
        <el-row class='first-title'>
            <div class="lf">
                <h3>薪酬数据看板</h3>
            </div>
        </el-row>
        <el-row :gutter="20" class="paneRow">
            <el-col :span='12'>
                <div class="table-container rankPerIncomePane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>各职级人均收入</span>
                        </div>
                        <el-tabs v-model="rankPerIncomePane.rankPerIncomeTab"  type="card">
                            <el-tab-pane v-bind:label="managerIncomePane.managerIncomeTable.list[0]" name="first">
                                <div class="paneDiv">
                                    <el-table
                                    	v-if="rankPerIncomePane.rankPerIncomeTable.columns && rankPerIncomePane.rankPerIncomeTable.columns.length>0"

                                        :data="rankPerIncomePane.rankPerIncomeTable.beforeData"
                                        style="width: 100%"
                                        height="300"
                                        >
    
                                        <el-table-column
                                            v-for="column in rankPerIncomePane.rankPerIncomeTable.columns"
                                            :key='column.prop'
                                            :prop='column.prop'
                                            :label='column.label'
                                            :min-width='column.width'>
                                            <template>
                                                <span :class="column.class">{{column.label}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane v-bind:label="managerIncomePane.managerIncomeTable.list[1]" name="second">
                                <div class="paneDiv">
                                    
                                    <el-table
                                    	v-if="rankPerIncomePane.rankPerIncomeTable.columns && rankPerIncomePane.rankPerIncomeTable.columns.length>0"
                                      
                                        :data="rankPerIncomePane.rankPerIncomeTable.lastData"
                                        style="width: 100%"
                                        height="300"
                                        >
                            
                                        <el-table-column
                                        	
                                            v-for="column in rankPerIncomePane.rankPerIncomeTable.columns"
                                            :key='column.prop'
                                            :prop='column.prop'
                                            :label='column.label'
                                            :min-width='column.width'>
                                            <template>
                                                <span :class="column.class">{{column.label}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane v-bind:label="managerIncomePane.managerIncomeTable.list[2]" name="third">
                                <div class="paneDiv">
                                    <el-table
                                    	
                                        v-if="rankPerIncomePane.rankPerIncomeTable.columns && rankPerIncomePane.rankPerIncomeTable.columns.length>0"
                                        :data="rankPerIncomePane.rankPerIncomeTable.thisData"
                                        style="width: 100%"
                                        height="300"
                                        >
                                        <el-table-column
                                            v-for="column in rankPerIncomePane.rankPerIncomeTable.columns"
                                            :key='column.prop'
                                            :prop='column.prop'
                                            :label='column.label'
                                            :min-width='column.width'>
                                            <template>
                                                <span :class="column.class">{{column.label}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </div>
            </el-col>
            <el-col :span='12'>
                <div class="table-container managerIncomePane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>总经理年收入基准值</span>
                        </div>
                        <el-tabs v-model="managerIncomePane.managerIncomeTab"  type="card">
                            <el-tab-pane v-bind:label="managerIncomePane.managerIncomeTable.list[2]" name="third">
                                <div v-if="" class="paneDiv">
                                    <el-table
                                        :data="managerIncomePane.managerIncomeTable.thisData"
                                        style="width: 100%"
                                        height="300"
                                        >
                  
                                        <el-table-column
                                            v-for="column in managerIncomePane.managerIncomeTable.columns"
                                            :key='column.prop'
                                            :prop='column.prop'
                                            :label='column.label'
                                            :min-width='column.width'>
                                            <template>
                                                <span :class="column.class">{{column.label}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane v-bind:label="managerIncomePane.managerIncomeTable.list[1]" name="second">
                                <div class="paneDiv">
                                    <el-table
                                       
                                        :data="managerIncomePane.managerIncomeTable.lastData"
                                        style="width: 100%"
                                        height="300"
                                        >
       
                                        <el-table-column
                                            v-for="column in managerIncomePane.managerIncomeTable.columns"
                                            :key='column.prop'
                                            :prop='column.prop'
                                            :label='column.label'
                                            :min-width='column.width'>
                                            <template>
                                                <span :class="column.class">{{column.label}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane v-bind:label="managerIncomePane.managerIncomeTable.list[0]" name="first">
                                <div class="paneDiv">
                                    <el-table
                                        :data="managerIncomePane.managerIncomeTable.beforeData"
                                        style="width: 100%"
                                        height="300"
                                        >
                            
                                        <el-table-column
                                            v-for="column in managerIncomePane.managerIncomeTable.columns"
                                            :key='column.prop'
                                            :prop='column.prop'
                                            :label='column.label'
                                            :min-width='column.width'>
                                            <template>
                                                <span :class="column.class">{{column.label}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="paneRow">
            <el-col :span='12'>
                <div class="table-container allPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>整体</span>
                        </div>
                        <div class="chartDiv">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <div ref="allChartLeft" style="height:250px"></div>
                                </el-col>
                                <el-col :span="12">
                                    <div ref="allChartRight" style="height:250px"></div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span='12'>
                <div class="table-container perPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>人均</span>
                        </div>
                        <div ref="perChart" style="height:250px"></div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row class="paneRow">
            <el-col>
                <div class="table-container efficiencyPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>效能</span>
                        </div>
                        <div class="chartDiv">
                            <div ref="efficiencyChart" style="height:350px"></div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row class="paneRow">
            <el-col>
                <div class="table-container efficiencyPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>人工成本</span>
                        </div>
                        <div class="chartDiv">
                            <div ref="laborCostChart" style="height:450px"></div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row class="paneRow">
            <el-col>
                <div class="table-container efficiencyPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>职工人数</span>
                        </div>
                        <div class="chartDiv">
                            <div ref="staffNumChart" style="height:450px"></div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row class="paneRow">
            <el-col>
                <div class="table-container PerSalaryPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>人均工资</span>
                        </div>
                        <div class="chartDiv">
                            <div ref="perSalaryChart" style="height:450px"></div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row class="paneRow">
            <el-col>
                <div class="table-container efficiencyPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>劳动生产率</span>
                        </div>
                        <div class="chartDiv">
                            <div ref="productivityRatioChart" style="height:650px"></div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row class="paneRow">
            <el-col>
                <div class="table-container efficiencyPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>人事费用率</span>
                        </div>
                        <div class="chartDiv">
                            <div ref="staffCostRatioChart" style="height:650px"></div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row class="paneRow">
            <el-col>
                <div class="table-container efficiencyPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>人工成本利润率</span>
                        </div>
                        <div class="chartDiv">
                            <div ref="laborCostRatioChart" style="height:650px"></div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-row class="paneRow">
            <el-col>
                <div class="table-container efficiencyPane">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>投入产出比</span>
                        </div>
                        <div class="chartDiv">
                            <div ref="inoutRatioChart" style="height:650px"></div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Vue from 'vue'
import echarts from 'echarts'
import {
	Col,
	Row,
	Tabs,
	TabPane,
	Card,
	Table,
	TableColumn,

} from 'element-ui'
Vue.use(Col)
Vue.use(Row)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Card)
Vue.use(Table)
Vue.use(TableColumn)
export default {
	data () {
		return {
			rankPerIncomePane: {
				rankPerIncomeTab: 'third',
				rankPerIncomeTable: {
					thisData: [],
					lastData: [],
					beforeData: [],
					columns: [],
					list: [],
				}
			},
			managerIncomePane: {
				managerIncomeTab: 'third',
				managerIncomeTable: {
					thisData: [],
					lastData: [],
					beforeData: [],
					list: [],
					columns: [
						{
							prop: 'descrshort',
							label: '单位',
							width: '15%'
						},
						{
							prop: 'unit',
							label: '货币单位',
							width: '12%'
						},
						{
							prop: 'ngwgz',
							label: '年岗位工资',
							width: '18%'
						},
						{
							prop: 'jxgz',
							label: '绩效奖金',
							width: '16%'
						},
						{
							prop: 'fzgz',
							label: '辅助工资',
							width: '15%'
						},
						{
							prop: 'nsrjzz',
							label: '年收入基准值',
							width: '22%'
						}
					]
				}
			},
			tableShow: false,
		}
	},
	components: {
	},
	created () {
	},
	mounted () {
		this.getRankPerIncomeData()
		this.getManagerIncomeData()
		this.getAllData()
		this.getPerData()
		// 人工成本
		this.getLaborCostData()
		this.getStaffNumData()
		this.getEfficiencyData()
		this.getPerSalaryData()
		this.getProductivityRatioData()
		this.getStaffCostRatioData()
		this.getLaborCostRatioData()
		this.getInoutRatioData()
	},
	methods: {
		// 柱折混合图公共函数
		barLinePublic: function (res, data, func) {
			if (res.data.status === 1) {
				var opt = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},
					toolbox: {
						// feature: {
						//     dataView: {show: true, readOnly: false},
						//     magicType: {show: true, type: ['line', 'bar']},
						//     restore: {show: true},
						//     saveAsImage: {show: true}
						// }
					},
					legend: {
						data: []
					},
					xAxis: [
						{
							type: 'category',
							data: [],
							nameRotate: 90,
							axisPointer: {
								type: 'shadow'
							}
						}
					],
					yAxis: [
						{
							type: 'value',
							name: '',
							min: 0,
							max: 50,
							// interval: 10,
							// splitNumber:5,
							axisLabel: {
								formatter: '{value}'
							}
						},
						{
							type: 'value',
							name: '',
							min: 0,
							max: 100,
							// interval: 20,
							// splitNumber:5,
							axisLabel: {
								formatter: '{value}%'
							}
						}
					],
					series: [
						{
							name: '',
							type: 'bar',
							itemStyle: {
								normal: {
									color: '#3398DB'
								}
							},
							data: []
						},
						{
							name: '',
							type: 'bar',
							itemStyle: {
								normal: {
									color: '#f44336'
								}
							},
							data: []
						},
						{
							name: '',
							type: 'line',
							yAxisIndex: 1,
							itemStyle: {
								normal: {
									color: '#A991F2'
								}
							},
							data: []
						}
					]
				}
				if (data.length) {
					opt.legend.data.push('' + data[0].before)
					opt.legend.data.push('' + data[0].last)
					opt.legend.data.push('同比增长率')
					opt.yAxis[0].name = data[0].unit
					opt.yAxis[1].name = '同比增长率'
					opt.series[0].name = data[0].before
					opt.series[1].name = data[0].last
					opt.series[2].name = '同比增长率'
					for (var i = 0; i < data.length; i++) {
						opt.xAxis[0].data.push(data[i].descr)
						opt.series[0].data.push(data[i].beforeYear)
						opt.series[1].data.push(data[i].lastYear)
						opt.series[2].data.push(parseFloat(data[i].yearGrowth))
					}
				}
				var minMaxObj1 = this.getMinMaxObj(opt.series[0].data.concat(opt.series[1].data), 5, 0, null)
				var minMaxObj2 = this.getMinMaxObj(opt.series[2].data, 5, null, null)
				opt.yAxis[0].min = minMaxObj1.min
				opt.yAxis[0].max = minMaxObj1.max
				opt.yAxis[0].interval = minMaxObj1.interval
				opt.yAxis[1].min = minMaxObj2.min
				opt.yAxis[1].max = minMaxObj2.max
				opt.yAxis[1].interval = minMaxObj2.interval
				// console.log('77777777777777',minMaxObj1)
				// console.log('99999999999999',minMaxObj2)
				func(opt)
			}
		},
		// 比率公共函数
		ratioPublic: function (res, data, func) {
			if (res.data.status === 1) {
				var opt = {
					title: {
						text: '',
						subtext: ''
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%'
					},
					legend: {
						data: []
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					yAxis: {
						type: 'category',
						data: []
					},
					series: [
						{
							name: '',
							type: 'bar',
							itemStyle: {
								normal: {
									color: '#3398DB'
								}
							},
							data: []
						},
						{
							name: '',
							type: 'bar',
							itemStyle: {
								normal: {
									color: '#f44336'
								}
							},
							data: []
						}
					]
				}
				if (data.length) {
					opt.legend.data.push('' + data[0].before)
					opt.legend.data.push('' + data[0].last)
					// opt.xAxis.name = data[0].unit
					opt.series[0].name = data[0].before
					opt.series[1].name = data[0].last
					for (var i = 0; i < data.length; i++) {
						opt.yAxis.data.push(data[i].descr)
						opt.series[0].data.push(data[i].beforeYear)
						opt.series[1].data.push(data[i].lastYear)
					}
				}
				func(opt)
			}
		},
		// 获取数组最小最大值,并根据间隔数设置坐标轴间隔
		getMinMaxObj: function (arr, splitNumber, min, max) {
			var obj = {
				min: 0,
				max: 0,
				interval: 0
			}
			// var minDigits = 0,minMid,maxDigits = 0,maxMid
			if (arr.length) {
				obj.min = arr[0]
				obj.max = arr[0]
				for (var i = 1; i < arr.length; i++) {
					if (obj.min > arr[i]) {
						obj.min = arr[i]
					}
					if (obj.max < arr[i]) {
						obj.max = arr[i]
					}
				}
			}
			// minMid = obj.min
			// maxMid = obj.max
			// while(parseInt(minMid)/10 !== 0){
			//     minMid = parseInt(minMid)/10
			//     minDigits++
			// }
			// while(parseInt(maxMid)/10 !== 0){
			//     maxMid = parseInt(maxMid)/10
			//     maxDigits++
			// }
			if (min !== null && max !== null) {
				obj.min = min
				obj.max = max
			} else {
				if (min !== null) {
					obj.min = min
					// obj.max = parseInt(obj.max)/(10*maxDigits)*(10*maxDigits)+10*maxDigits
					obj.max = parseInt(obj.max) + 10
				} else if (max !== null) {
					obj.max = max
					// obj.min = parseInt(obj.min)/(10*minDigits)*(10*minDigits)+10*minDigits
					obj.min = parseInt(obj.min) - 10
				} else {
					// obj.min = parseInt(obj.min)/(10*minDigits)*(10*minDigits)+10*minDigits
					// obj.max = parseInt(obj.max)/(10*maxDigits)*(10*maxDigits)+10*maxDigits
					obj.min = parseInt(obj.min) - 10
					obj.max = parseInt(obj.max) + 10
				}
			}
			obj.interval = (obj.max - obj.min) / splitNumber
			return obj
		},
		// 获取各职级人均收入
		getRankPerIncomeData: function () {
			this.ajaxPost('/dataBoard/getPerRankIncomeList', null, this.getRankPerIncomeCB)
		},
		getRankPerIncomeCB: function (res) {
			if (res.data.status === 1) {
				var colm = []
				this.rankPerIncomePane.rankPerIncomeTable.thisData = res.data.datas.thisShowList
				this.rankPerIncomePane.rankPerIncomeTable.lastData = res.data.datas.lastShowList
				this.rankPerIncomePane.rankPerIncomeTable.beforeData = res.data.datas.beforeShowList
				colm.push({
					prop: 'descrshort',
					label: '部门单位',
					width: '10%'
				})
				colm.push({
					prop: 'unit',
					label: '货币单位',
					width: '10%'
				})
				for (var i = 0, len = res.data.datas.perRankLise.length; i < len; i++) {

					colm.push({
						prop: res.data.datas.perRankLise[i].rankId,
						label: res.data.datas.perRankLise[i].rankName,
						width: (0.8 / len) * 100 + '%'
					})
				}
				console.log(colm, 'colm')
				this.rankPerIncomePane.rankPerIncomeTable.columns = colm

				this.tableShow = true
			}
		},
		// 总经理年收入基准值
		getManagerIncomeData: function () {
			this.ajaxPost('/dataBoard/getGeneralManagerList', null, this.getManagerIncomeCB)
		},
		getManagerIncomeCB: function (res) {
			if (res.data.status === 1) {
				this.managerIncomePane.managerIncomeTable.thisData = res.data.datas.thisShowList
				this.managerIncomePane.managerIncomeTable.lastData = res.data.datas.lastShowList
				this.managerIncomePane.managerIncomeTable.beforeData = res.data.datas.beforeShowList
				this.managerIncomePane.managerIncomeTable.list = res.data.datas.years
			}
		},
		// 整体数据
		getAllData: function () {
			this.ajaxPost('/dataBoard/getAllEmpAndCost', null, this.getAllDataCB)
		},
		getAllDataCB: function (res) {
			if (res.data.status === 1) {
				var data1 = res.data.datas.staffTotal
				var data2 = res.data.datas.laborCost
				var opt = {
					color: ['#3398DB', '#444'],
					title: {
						text: '职工人数',
						subtext: ''
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					legend: {
						data: []
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							data: [],
							axisTick: {
								alignWithLabel: true
							}
						}
					],
					yAxis: [
						{
							type: 'value',
							name: ''
						}
					],
					series: [
						{
							name: '职工人数',
							type: 'bar',
							barWidth: '60%',
							data: []
						}
					]
				}
				var opt2 = {
					color: ['#f44336', '#444'],
					title: {
						text: '人工成本',
						subtext: ''
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					legend: {
						data: []
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							data: [],
							axisTick: {
								alignWithLabel: true
							}
						}
					],
					yAxis: [
						{
							type: 'value',
							name: ''
						}
					],
					series: [
						{
							name: '人工成本',
							type: 'bar',
							barWidth: '60%',
							data: []
						}
					]
				}
				var xAxis = [], series = [], xAxis2 = [], series2 = []
				for (var i = 0; i < data1.length; i++) {
					xAxis.push(data1[i].year)
					series.push(data1[i].total)
				}
				for (var i = 0; i < data2.length; i++) {
					xAxis2.push(data2[i].year)
					series2.push(data2[i].total)
				}
				opt.xAxis[0].data = xAxis
				opt.series[0].data = series
				opt2.xAxis[0].data = xAxis2
				opt2.series[0].data = series2
				if (data1.length) {
					opt.title.subtext = '单位:' + data1[0].unit
				}
				if (data2.length) {
					opt2.title.subtext = '单位:' + data2[0].unit
				}
				this.drawAllChart(opt, opt2)
			}
		},
		drawAllChart: function (option, option2) {
			var leftChart = echarts.init(this.$refs.allChartLeft)
			var rightChart = echarts.init(this.$refs.allChartRight)
			leftChart.setOption(option)
			rightChart.setOption(option2)
		},
		// 人均数据
		getPerData: function () {
			this.ajaxPost('/dataBoard/getPerStatisticsBydata', null, this.getPerCB)
		},
		getPerCB: function (res) {
			if (res.data.status === 1) {
				var data = res.data.datas.perStatisList
				var opt = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},
					toolbox: {
						// feature: {
						//     dataView: {show: true, readOnly: false},
						//     magicType: {show: true, type: ['line', 'bar']},
						//     restore: {show: true},
						//     saveAsImage: {show: true}
						// }
					},
					legend: {
						data: []
					},
					xAxis: [
						{
							type: 'category',
							data: [],
							axisPointer: {
								type: 'shadow'
							}
						}
					],
					yAxis: [
						{
							type: 'value',
							name: '',
							min: 0,
							max: 100,
							interval: 20,
							axisLabel: {
								formatter: '{value}'
							}
						},
						{
							type: 'value',
							name: '',
							min: 0,
							max: 100,
							interval: 20,
							axisLabel: {
								formatter: '{value}%'
							}
						}
					],
					series: [
						{
							name: '',
							type: 'bar',
							itemStyle: {
								normal: {
									color: '#3398DB'
								}
							},
							data: []
						},
						{
							name: '',
							type: 'bar',
							itemStyle: {
								normal: {
									color: '#f44336'
								}
							},
							data: []
						},
						{
							name: '',
							type: 'line',
							yAxisIndex: 1,
							itemStyle: {
								normal: {
									color: '#A991F2'
								}
							},
							data: []
						}
					]
				}
				if (data.length) {
					opt.legend.data.push('' + data[0].before)
					opt.legend.data.push('' + data[0].last)
					opt.legend.data.push('同比增长率')
					opt.yAxis[0].name = data[0].unit
					opt.yAxis[1].name = '同比增长率'
					opt.series[0].name = data[0].before
					opt.series[1].name = data[0].last
					opt.series[2].name = '同比增长率'
					for (var i = 0; i < data.length; i++) {
						opt.xAxis[0].data.push(data[i].china_name)
						opt.series[0].data.push(data[i].beforeYear)
						opt.series[1].data.push(data[i].lastYear)
						opt.series[2].data.push(parseFloat(data[i].yearGrowth))
					}
				}
				this.drawPerChart(opt)
			}
		},
		drawPerChart: function (option) {
			var leftChart = echarts.init(this.$refs.perChart)
			leftChart.setOption(option)
		},
		// 效能数据
		getEfficiencyData: function () {
			this.ajaxPost('/dataBoard/getAllEfficacy', null, this.getEfficiencyCB)
		},
		getEfficiencyCB: function (res) {
			if (res.data.status === 1) {
				var data = res.data.datas.efficacyList
				var opt = {
					title: {
						text: '',
						subtext: ''
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%'
					},
					legend: {
						data: []
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					yAxis: {
						type: 'category',
						data: []
					},
					series: [
						{
							name: '2011年',
							type: 'bar',
							itemStyle: {
								normal: {
									color: '#3398DB'
								}
							},
							data: []
						},
						{
							name: '2012年',
							type: 'bar',
							itemStyle: {
								normal: {
									color: '#f44336'
								}
							},
							data: []
						}
					]
				}
				if (data.length) {
					opt.legend.data.push('' + data[0].before)
					opt.legend.data.push('' + data[0].last)
					// opt.xAxis.name = data[0].unit
					opt.series[0].name = data[0].before
					opt.series[1].name = data[0].last
					for (var i = 0; i < data.length; i++) {
						opt.yAxis.data.push(data[i].china_name)
						opt.series[0].data.push(data[i].beforeYear)
						opt.series[1].data.push(data[i].lastYear)
					}
				}
				this.drawEfficiencyChart(opt)
			}
		},
		drawEfficiencyChart: function (option) {
			var leftChart = echarts.init(this.$refs.efficiencyChart)
			leftChart.setOption(option)
		},
		// 人工成本
		getLaborCostData: function () {
			this.ajaxPost('/dataBoard/getperCapitaWagesBydata', { leaderType: 'B' }, this.getLaborCostCB)
		},
		getLaborCostCB: function (res) {
			this.barLinePublic(res, res.data.datas, this.drawLaborCostChart)
		},
		drawLaborCostChart: function (option) {
			var leftChart = echarts.init(this.$refs.laborCostChart)
			leftChart.setOption(option)
		},
		// 职工人数
		getStaffNumData: function () {
			this.ajaxPost('/dataBoard/getperCapitaWagesBydata', { leaderType: 'C' }, this.getStaffNumCB)
		},
		getStaffNumCB: function (res) {
			this.barLinePublic(res, res.data.datas, this.drawStaffNumChart)
		},
		drawStaffNumChart: function (option) {
			var leftChart = echarts.init(this.$refs.staffNumChart)
			leftChart.setOption(option)
		},
		// 人均工资
		getPerSalaryData: function () {
			this.ajaxPost('/dataBoard/getperCapitaWagesBydata', { leaderType: 'A' }, this.getPerSalaryCB)
		},
		getPerSalaryCB: function (res) {
			this.barLinePublic(res, res.data.datas, this.drawPerSalaryChart)
		},
		drawPerSalaryChart: function (option) {
			var leftChart = echarts.init(this.$refs.perSalaryChart)
			leftChart.setOption(option)
		},
		// 劳动生产率
		getProductivityRatioData: function () {
			this.ajaxPost('/dataBoard/getLaborCostBydata', { leaderType: 'D' }, this.getProductivityRatioCB)
		},
		getProductivityRatioCB: function (res) {
			this.ratioPublic(res, res.data.datas, this.drawProductivityRatioChart)
		},
		drawProductivityRatioChart: function (option) {
			var leftChart = echarts.init(this.$refs.productivityRatioChart)
			leftChart.setOption(option)
		},
		// 人事费用率
		getStaffCostRatioData: function () {
			this.ajaxPost('/dataBoard/getLaborCostBydata', { leaderType: 'C' }, this.getStaffCostRatioCB)
		},
		getStaffCostRatioCB: function (res) {
			this.ratioPublic(res, res.data.datas, this.drawStaffCostRatioChart)
		},
		drawStaffCostRatioChart: function (option) {
			var leftChart = echarts.init(this.$refs.staffCostRatioChart)
			leftChart.setOption(option)
		},
		// 人工成本利润率
		getLaborCostRatioData: function () {
			this.ajaxPost('/dataBoard/getLaborCostBydata', { leaderType: 'A' }, this.getLaborCostRatioCB)
		},
		getLaborCostRatioCB: function (res) {
			this.ratioPublic(res, res.data.datas, this.drawLaborCostRatioChart)
		},
		drawLaborCostRatioChart: function (option) {
			var leftChart = echarts.init(this.$refs.laborCostRatioChart)
			leftChart.setOption(option)
		},
		// 投入产出比
		getInoutRatioData: function () {
			this.ajaxPost('/dataBoard/getLaborCostBydata', { leaderType: 'B' }, this.getInoutRatioCB)
		},
		getInoutRatioCB: function (res) {
			this.ratioPublic(res, res.data.datas, this.drawInoutRatioChart)
		},
		drawInoutRatioChart: function (option) {
			var leftChart = echarts.init(this.$refs.inoutRatioChart)
			leftChart.setOption(option)
		},
		ajaxPost: function (url, params, callback) {
			var self = this
			this.Axios.Post(url, params)
				.then(function (res) {
					if (callback) {
						callback(res, self)
					}
				})
		}
	}
}
</script>

<style scoped>
.paymentData .first-title h3 {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.1;
}
.paymentData .paneRow {
  margin-bottom: 20px;
}
.paymentData .paneDiv {
  padding: 10px 0;
}
.paymentData .box-card {
  border-top: 3px solid #00a65a;
}
.paymentData .chartDiv {
}
</style>
<style>
.paymentData .el-card__header {
  padding: 11px 20px;
  border-bottom: 0;
}
.paymentData .el-tabs.el-tabs--card {
  position: relative;
  top: -62px;
  margin-bottom: -62px;
}
.paymentData .el-tabs__nav {
  float: right;
}
.paymentData .el-card__body {
  min-height: 350px;
}
.paymentData .el-table .cell,
.el-table th > div {
  padding: 0 4px;
  text-align: center;
}
.paymentData .el-table .el-table__body {
  width: 100% !important;
}
</style>
